import React from 'react'
import { connect } from 'react-redux'
import { ConfigType } from '../../common/enums'
import { getActiveConfigTypeSelector } from '../../selectors/baseSelector'
import { genSetActiveConfigType } from '../../actions/home'
import { SingleSelectableList } from '../layout/singleSelectableList'
import { ColHeader } from './colHeader'

const maStateToProps = state => {
    return {
        activeConfigType: getActiveConfigTypeSelector(state),
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onSelectItem: configType => dispatch(genSetActiveConfigType(configType)),
    }
}

export const ConfigTypeList = connect(maStateToProps, mapDispatchToProps)((props) => {
    const { activeConfigType, onSelectItem } = props
    const configTypes = Object.keys(ConfigType)

    return (
        <React.Fragment>
            <ColHeader title='配置项：' />
            <SingleSelectableList activeValue={activeConfigType} dataSource={configTypes}
                getItemValue={item => item} getItemTitle={item => item} onSelectItem={onSelectItem} />
        </React.Fragment>
    )
})